<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>设置自定义属性的其他方式</title>
     <link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
     <style>code::-webkit-scrollbar {display: none;}</style>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

     <pre>
        <code style='border-radius: 10px;'>
        // 设置自定义属性的其他方式
        // 方案1：使用对象的堆栈
        let btns = document.querySelectorAll('button')
        for(var i = 0;i < btns.length; i++){
            btns[i].myIndex = i + 1
            btns[i].addEventListener('click',function() {
                console.log('当前是第几个按钮',this.myIndex);
            })
        }

        // 方案2：使用在标签内部设置属性data-xxx-xxx 
        for(var i = 0;i < btns.length; i++){
            btns[i].setAttribute('data-set-index',i + 1)
            btns[i].addEventListener('click',function() {
                console.log('当前是第几个按钮',Number(this.getAttribute('data-set-index')));
            })
        }
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        // 设置自定义属性的其他方式
        // 方案1：使用对象的堆栈
        let btns = document.querySelectorAll('button')
        for(var i = 0;i < btns.length; i++){
            btns[i].myIndex = i + 1
            btns[i].addEventListener('click',function() {
                console.log('当前是第几个按钮',this.myIndex);
            })
        }

        // 方案2：使用在标签内部设置属性data-xxx-xxx 
        for(var i = 0;i < btns.length; i++){
            btns[i].setAttribute('data-set-index',i + 1)
            btns[i].addEventListener('click',function() {
                console.log('当前是第几个按钮',Number(this.getAttribute('data-set-index')));
            })
        }
     </script>
</body>
</html>